<template>
  <div class="wrap">
    <template>
      <div>
        <el-tabs v-model="params.curTab" @tab-click="setCurTab">
          <el-tab-pane name="TabLFrame" :label="$t('message.FrameDesignTool.typeL')">
            <img src="../../cmdPics/frameSectionTypes/LFrame.png" width="200" height="200"
                 :alt="$t('message.FrameDesignTool.typeL')" :title="$t('message.FrameDesignTool.typeL')">
            <l-frame ref="lFrame"></l-frame>
          </el-tab-pane>
          <el-tab-pane name="TabCFrame" :label="$t('message.FrameDesignTool.typeC')">
            <img src="../../cmdPics/frameSectionTypes/CFrame.png" width="200" height="200"
                 :alt="$t('message.FrameDesignTool.typeL')" :title="$t('message.FrameDesignTool.typeL')">
            <c-frame ref="cFrame"></c-frame>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
  </div>
</template>

<script>
import LFrame from "./LFrame.vue";
import CFrame from "./CFrame.vue";
import BaseDialogImageAllowedButtonList from "../../BaseComponents/BaseDialogImageAllowedButtonList.vue";
import { frameDesignToolCommand } from "../../../Command/FrameDesignToolCommand";
import DialogMixin from "../DialogMixin";
import { ElementType } from "../../../modeling/TypeDefine";

export default {
  name: "FrameDesignTool",
  components: {CFrame, LFrame, BaseDialogImageAllowedButtonList},
  mixins: [DialogMixin],
  data() {
    return {
      isInit: false,
      tabOptions: ["TabLFrame", "TabCFrame"],
      currentTab:0,
      params: {
        curTab: "TabLFrame",
      }
    }
  },
  mounted() {
    if (!this.isInit) {
      frameDesignToolCommand.init(300, 300, 400, () => {
        frameDesignToolCommand.clearAllHighLight();
        this.setSelectType('selDatumPlane')
        this.handlePickElement();
        this.isInit = true;
      })
    }
  },
  methods: {
    handlePickElement(){
      frameDesignToolCommand.handlePickElement(res => {
        if(this.currentTab === 0){
          this.$refs.lFrame.handlePickElement(res);
        }else {
          this.$refs.cFrame.handlePickElement(res);
        }
      })
    },
    setSelectType(typeName){
      if(typeName === 'selDatumPlane'){
        this.params.filters = [ElementType.DATUMPLANE];
      }else if(typeName === 'selRefSurface'){
        this.params.filters = [ElementType.SURFACE,ElementType.FACE];
      }
      frameDesignToolCommand.setSelectType(this.params.filters);
    },

    setCurTab(tab) {
      if (tab.index === "1") {
        this.params.curTab = this.tabOptions[1];
        this.currentTab = 1;
        this.$refs.cFrame.getCurrentQueryActive()

      } else {
        this.params.curTab = this.tabOptions[0];
        this.currentTab = 0;
        this.$refs.lFrame.getCurrentQueryActive()
      }
    },
    changePluginContainerHeight() {
      frameDesignToolCommand.changePluginContainerHeight(
        {minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight + 10})
    },
  },
}
</script>

<style scoped>
.wrap {
  font-size: 12px;
}
</style>